<template>
  <div class="page mid">
    <div class="list">
      <div
        class="list-item"
        v-for="(item, index) in menuList"
        :key="index"
        @click="itemAction(item)"
      >
        <div class="list-item-icon mid">
          <img :src="item.icon" width="28" height="32" alt="图标" />
        </div>
        <div class="list-item-content mid">
          <div>
            <div class="title">{{ item.name }}</div>
          </div>
        </div>
        <div class="list-item-extra mid">
          <img :src="url.icon_arrow_right" width="12" height="24" alt="箭头" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import menuDict from './dict/menu'

export default {
  data() {
    return {
      url: {
        icon_arrow_right: require('../../assets/images/school/icon_arrow_golden.png'),
      },
      userInfo: {},
      menuList: menuDict.teacherEnter,
      dictData: {},
      dialogShow: false,
      dialogTitle: '',
      dialogState: '',
      route: {},
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    async itemAction(item) {
      switch (item.id) {
        case 'report':
          this.$router.push({
            path: '/school/dailyReport',
            query: {
              card_no: this.$route.query.card_no,
            },
          })
          // this.$toast('功能暂未开放')
          break
        case 'examine':
          this.$router.push({
            path: '/school/studentExamine',
            query: {
              card_no: this.$route.query.card_no,
            },
          })
          break
      }
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  background: url('../../assets/images/school/bg_enter_new.png') no-repeat;
  background-size: contain;
  padding: 30px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  color: black;
  overflow: auto;

  .dialog {
    height: 800px;
    // 内容
    /deep/ .van-dialog__content {
      overflow-y: auto;
      height: 100%;
    }

    // 操作栏
    /deep/ .van-dialog__footer {
      transform: translate3d(0, 0, 0);
      width: 100%;
      position: absolute;
      bottom: 0;
    }

    // 对话框内容
    &-container {
      min-height: 200px;
      color: #000;
      padding: 10px 10px 120px;
    }
  }

  .list {
    margin-bottom: 100px;
    margin-top: 90%;
    width: 100%;
    min-height: 100%;
    border-radius: 20px;
    box-sizing: border-box;

    & > :not(:last-child) {
      margin-bottom: 20px;
    }

    .list-item {
      min-height: 80px;
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;
      background-image: url('../../assets/images/school/bar_golden.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 30px 30px;
      border-radius: 5px;
      &-content {
        width: 75%;
        text-align: left;
        padding: 0px 8px;

        .title {
          font-weight: 500;
          font-size: 22px;
          line-height: 48px;
          text-align: left;
          color: #d58913;
        }

        .desc {
          font-size: 24px;
        }
      }

      &-extra {
        font-weight: bold;
      }
    }
  }
}
</style>
